<template>
    <div class="layout">
        <!-- 头部 -->
        <div class="top flex flex-between">
            <div>总后台管理中心</div>
            <div>
                <div>欢迎您，{{userName}}<span class="exit" @click="exit()">退出</span></div>
            </div>
        </div>
        <div class="flex main">
            <!-- 菜单 -->
            <menus />
            <!-- 容器 -->
            <div class="demo">
                <router-view>
                    <div class="container" style="background:#fff;margin-top:10px">
                        <cmsTitle :title="$route.meta.title||'砂锅后台'" style="padding: 15px;" />
                    </div>
                </router-view>
            </div>
        </div>
    </div>
</template>

<script>
import menus from '@/components/menu.vue'
export default {
    components: {
        menus
    },
    data () {
        return {
            userName:""
        }
    },
    mounted () {
        if(sessionStorage.username){
            this.userName = sessionStorage.username;
        }
        else{
            this.userName = localStorage.getItem('username')?localStorage.getItem('username'):'';
        }
    },
    methods: {
        // 退出登录
        exit: function () {
            this.$confirm('确定要退出登录吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(() => {
                this.$router.push('/login');
                localStorage.clear();
                sessionStorage.clear();
            })
        }
    }

}
</script>

<style lang="scss" scoped>
.layout {
    .top {
        padding: 20px 30px;
        color: #fff;
        border-bottom: 1px solid #e6e6e6;
        background-color: #002850;
    }
    .exit {
        color: #dddddd;
        margin-left: 40px;
        cursor: pointer;
    }
    .demo {
        width: calc(100% - 222px);
        margin: 10px 10px 0 10px;
    }

}
</style>
